import {useState, useEffect} from 'react'
import {Modal, List} from 'antd'
import { ServiceSchema } from '@src/components/schema/service'
import {getListRequest} from './ajax'
import { awaitWrap, formatDate } from '@src/assets/js/tool'
import {ServiceFeedbackSchema} from '@components/schema/service'
import style from './index.module.less'

async function initData (id: string, setLoading: (v: boolean) => void, setList: (v: ServiceFeedbackSchema[]) => void) {
  setLoading(true)
  const [e, d] = await awaitWrap(getListRequest(id))
  setLoading(false)
  if (e === null && d !== null) {
    setList(d)
  }
}

interface Props {
  visible: boolean
  data: ServiceSchema | null
  hide: () => void
}

function Main ({visible, data, hide}: Props) {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState<ServiceFeedbackSchema[]>([])
  useEffect(() => {
    if (data && visible) {
      initData(data.id, setLoading, setList)
    }
  }, [visible, data])
  if (!data) {
     return <span />
  }
  return (
    <div>
      <Modal title='反馈内容' visible={visible} footer={false} onCancel={() => hide()}>
        <div className={style.list}>
          <List loading={loading} dataSource={list} renderItem={(li, i) => {
            return (
              <div key={i} className={style.item}>
                <div className={style.label}>
                  <span className={style.order}>{i+1}</span>
                  <span className={style.type}>{li.type}</span>
                  <span className={style.time}>{formatDate(li.create_datetime, 'YYYY-MM-DD HH:mm:ss')}</span>
                </div>
                {li.feedback_remark && <div className={style.content}>反馈内容：{li.feedback_remark}</div>}
              </div>
            )
          }} />
        </div>
      </Modal>
    </div>
  )
}

export default Main
